import { useRoutes } from "react-router-dom"
import { lazy } from "react"

// const News = lazy(()=>import('../pages/Login'))
import Login from '../pages/Login'
import List from '../components/List'

import Main from '../pages/Main'
import Home from "../pages/Main/Home"
import About from "../pages/Main/About"


// import { Routes } from "react-router-dom";
const routes = [
  {
    path: '/login',
    element: <Login />
  },  
  {
    path: '/main',
    element: <Main />,
    children:[
      {
        path: '/main/home',
        element: <Home />,
        children:[
          {
            path: '/main/home/news/:id',
            element: <List />
          },  
          {
            path: '/main/home/music/:id',
            element: <List />
          },  
        ]
      }, 
      {
        path: '/main/about',
        element: <About />
      }, 
    ]
  },
]

export default routes

//定义组件,在组件外层中可以使用hook
export const GetRoutes = ()=>{
  return useRoutes(routes)
}

//自定义钩子
export const useMyRoutes = ()=>{
  return useRoutes(routes)
}

